<template>
  <div class="main">
    <el-descriptions class="margin-top" title="用户基本信息" :column="1"  border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户头像
        </template>
        <img :src="getUserImageFilePathQiNiuYun(userInformation.user_header)" v-if="userInformation.comploImg" class="el_formx_img">
        <img :src="getStaticFilePathJAVA('noheaderimage.jpeg')"  class="el_formx_img" v-else>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-custom"></i>
          用户名字
        </template>
        {{ userInformation.user_name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{userInformation.user_phone}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-message"></i>
          邮箱
        </template>
        {{userInformation.user_mail}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          创建时间
        </template>
        {{userInformation.creat_time}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          上一次修改时间
        </template>
        {{userInformation.update_time}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-view"></i>
          角色状态
        </template>
        <el-tag type="success" v-if="String(userInformation.status) == '0'">正常</el-tag>
        <el-tag type="info" v-if="String(userInformation.status) == '1'">注销</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-full-screen"></i>
          用户性别
        </template>
        <span v-if="String(userInformation.user_sex) == '0'">男</span>
        <span v-if="String(userInformation.user_sex) == '1'">女</span>
      </el-descriptions-item>
    </el-descriptions>


  </div>
</template>
  
<script>
import getStorage from '@/utils/getStorage'
import myInformationApi from '@/api/userzRequest.js'

export default {
  // 组件名称
  name: 'userBaseInfor',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      //用户信息
      userInformation: {
        user_id: null,
        user_name: null,
        user_password: null,
        user_phone: null,
        user_mail: null,
        status: null,
        user_header: null,
        creat_time: null,
        update_time: null,
        user_sex: null,
      },
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {

  },
  // 组件方法
  methods: {
    //通过id查询个人中心
    selectUserInformation() {
      let UserIDX = getStorage.getAxiosUserId();
      myInformationApi.selectByUser_idMyself(UserIDX).then(res => {
        this.userInformation = res.data;
      })
    },
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 在实例初始化之后，组件属性计算之前，如data属性等
  */
  beforeCreate() {
  },
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created() {
    this.selectUserInformation();
  },
  /**
  * 在挂载开始之前被调用：相关的 render 函数首次被调用。
  */
  beforeMount() {

  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted() {
  },
  /**
  * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
  */
  beforeUpdate() {
  },
  /**
  * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
  */
  updated() {
  },
  /**
  * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
  */
  activated() {
  },
  /**
  * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
  */
  deactivated() {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy() {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed() {
  }
}
</script> 
  
  
<style scoped >
.main {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  align-content: flex-start;
  /*换行之后项目会根据整体布局进行调整，导致两行之间的间隙很大，所以我们还需要设置一个属性为align-content:flex-start 该样式用于让div与交叉轴的起点对齐（即顶部对齐）*/
}

.el_formx_img {
  position: relative;
  height: 10vh;
  width: 10vh;
  border-radius: 100%;
  cursor: pointer;
}
</style>
  